<template>
  <section class="container">

    <div class="row flat">
      <el-scrollbar>
        <div class="flex">

          <ul v-for="item in homeWorkList" class="plan plan1" style="margin-left: 40px">
            <li class="plan-name">{{ item.HomeworkName }}
            </li>
            <li class="plan-price">
              开始时间 <strong v-html="formatTime(item.StartTime)"></strong>
            </li>
            <li>
              结束时间<strong  v-html="formatTime(item.EndTime)"></strong>
            </li>
            <li>
              课程<strong>{{ item.CurriculumYear+"-"+item.CurriculumSeriesName}}</strong>
            </li>
            <li class="plan-action">
              <el-button type="primary" @click="showChapter(item)" :disabled="!item.active">进入</el-button>
            </li>
          </ul>
        </div>

      </el-scrollbar>
    </div>


  </section>
</template>

<script>
import axios from "axios";
import moment from "moment";

export default {
  name: "homeWorkList",
  data() {
    return {
      homeWorkList: []
    }
  },
  created() {
    axios.post("/api/StuGetHomeWorkList").then((res) => {
      if (res.status === 200) {
        this.homeWorkList = res.data
        this.checkExpiration()
      }
    })
  },
  methods: {
    formatTime(val){
      var time = moment(val)
      console.log(time)
      return 1+time.month()+"月"+time.date()+"日"+time.hours()+"时"+time.minutes()+"分"
    },
    showChapter(item) {
      this.$sestor.pushByNameResId('homeWorkDetail',item)
    },
    checkExpiration() {
      var moment = require('moment');
      var current = moment();
      for (let i = 0; i < this.homeWorkList.length; i++) {
        this.homeWorkList[i].active = moment(this.homeWorkList[i].EndTime).isAfter(current)
      }
    }
  }
}
</script>

<style scoped>

</style>